<template>
  <el-dialog v-model="props.chooseMaterialDialog" title="产品BOM物料选择" width="65%" :before-close="handleClose"
             append-to-body>
    <el-table :data="tableData" style="width: 100%"
              @current-change="selectClick" highlight-current-row>
      <el-table-column prop="bomMaterialCode" label="物料编码"/>
      <el-table-column prop="bomMaterialName" label="物料名称"/>
      <el-table-column prop="bomMaterialSpec" label="规格"/>
      <el-table-column prop="bomUnit" label="单位"/>
      <el-table-column prop="quantity" label="使用比例"/>
      <el-table-column prop="remark" label="备注"/>
    </el-table>

    <div class="pagination-container">
      <span class="total-items">共 {{ total }} 条</span>
      <el-select v-model="pageSize" class="page-size-select">
        <el-option label="10条/页" value="10"/>
        <el-option label="20条/页" value="20"/>
        <el-option label="30条/页" value="30"/>
      </el-select>
      <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next,jumper"/>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue'
import {findBomMaterial} from "@/apis/xms/index.js";
import {ElMessage} from "element-plus";

const props = defineProps({
  chooseMaterialDialog: Boolean,
  code: String
})
const emit = defineEmits(['close', 'confirm'])

const handleClose = () => {
  emit('close')
}

const paramsBom = ref({
  currentPage: 1,
  pageSize: 5,
  materialProductCode: props.code,
})

function findMaterialData(newValue) {
  findBomMaterial(newValue).then(res => {
    tableData.value = []
    if (res.records.length !== 0) {
      tableData.value = res.records[0].boms
    } else {
      tableData.value = []
    }
  })
}

onMounted(() => {
  findMaterialData(paramsBom.value)
})

watch(() => props['code'], (newCode) => {
  paramsBom.value.materialProductCode = newCode
  findMaterialData(paramsBom.value)
})

// Table data
const tableData = ref([])

// Selection handling
const selectedItems = ref([])
const handleSelectionChange = (selection) => {
  selectedItems.value = selection
}
const selectMaterial = ref(null)

const selectClick = (row) => {
  selectMaterial.value = null
  selectMaterial.value = row
  console.log(1, selectMaterial.value)
}


// Pagination
const currentPage = ref(1)
const pageSize = ref('10')
const total = ref(1)

// Dialog actions
const handleConfirm = () => {
  // Emit selected items
  if (selectMaterial.value !== null) {
    emit('confirm', selectMaterial.value)
    handleClose()
  } else {
    ElMessage.error("请选择数据")
  }
}
</script>

<style scoped>
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 16px;
}

.total-items {
  color: #606266;
  font-size: 14px;
}

.page-size-select {
  width: 100px;
}

.page-info {
  color: #606266;
  font-size: 14px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
}
</style>